<template>
  <el-container>
    <el-header style="background: #fff; border: 1px #e9eef3 solid;">
      <h1 class="title">学生公寓分配管理系统——管理端</h1>
      <el-dropdown style="float: right; margin-top: 30px; margin-right: 50px; font-size: 20px;">
        <span class="el-dropdown-link">
          {{ admin.username }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container>'

      <!-- 左侧导航栏 -->
      <el-aside width="200px" style="height: 80%;">
        <el-menu default-active="/admin/adminPermissions" router class="el-menu-vertical-demo" default-openeds="{1,2,3}">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <user/>
              </el-icon>
              <span>学生管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/admin">学生信息</el-menu-item>
              <el-menu-item index="/admin/apartment">宿舍分配</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <grid/>
              </el-icon>
              <span>宿舍管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/admin/buildingInfo">楼栋信息</el-menu-item>
              <el-menu-item index="/admin/roomInfo">宿舍信息</el-menu-item>
              <el-menu-item index="/admin/bedInfo">床位信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <view v-if="admin.role==1">
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <stamp/>
                </el-icon>
                <span>人事管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/adminInfo">宿管信息</el-menu-item>
                <el-menu-item index="/admin/adminPermissions">宿管审核</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </view>
        </el-menu>
      </el-aside>
      <!-- 右侧内容栏 -->
      <el-main style="background-color: #fff;">
        <el-table
            :data="tableData.slice((pagination.currentPage-1)*pagination.pageSize, pagination.currentPage*pagination.pageSize)"
            style="width: 100%; padding: 8px 8px 0 8px;">
          <el-table-column prop="username" label="用户名" width="300"/>
          <el-table-column prop="roleName" label="角色" width="300"/>
          <el-table-column prop="cellphone" label="手机号码" width="300"/>
          <el-table-column prop="id" label="操作" width="300">
            <template #default="scope">
              <el-button size="small" type="success" plain @click="editAdminDialog(scope.row.id)">编辑</el-button>
              <el-popconfirm title="确定删除该管理员信息?" @confirm="delAdmin(scope.row.id)">
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div class="footer">
          <!-- 分页 -->
          <el-pagination background layout="prev, pager, next"
                         v-model:currentPage="pagination.currentPage"
                         :page-size="pagination.pageSize"
                         :total="pagination.total"
                         @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-main>

      <!-- 编辑管理员Dialog -->
      <el-dialog
          v-model="dialogVisible" title="修改管理员信息" width="40%">
        <el-form :label-position="left" label-width="10px;" :model="editAdminInfo" :rules="rules">
          <el-row gutter="20">
            <el-col :span="14">
              <el-form-item label="用户名" prop="username" label-width="100">
                <el-input v-model="editAdminInfo.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号码" prop="cellphone" label-width="50" type="number">
                <el-input v-model="editAdminInfo.cellphone" placeholder="请输入手机号码" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password" label-width="50">
                <el-input v-model="editAdminInfo.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色" prop="role" label-width="50">
                <el-select v-model="editAdminInfo.role">
                  <el-option label="系统管理员" :value="1"></el-option>
                  <el-option label="宿舍管理员" :value="2"></el-option>
                  <el-option label="未审核(无权限)" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="editAdminInfo.role=='2'">
              <el-form-item label="管理宿舍楼" prop="buildingName" label-width="50">
                <el-select v-model="editAdminInfo.buildingName" placeholder="请输入宿舍楼">
                  <el-option :label="item.buildingName" :value="item.buildingName" v-for="(item,index) in buildingList"
                             :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editAdmin">修改</el-button>
      </span>
        </template>
      </el-dialog>

    </el-container>
  </el-container>


</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";
import {Stamp, User, Grid, ArrowDown} from '@element-plus/icons'
import axios from 'axios'

export default {
  data() {
    return {
      editAdminInfo: {},
      dialogVisible: false,
      pagination: {
        total: {
          type: Number
        },
        currentPage: 1,
        pageSize: 8
      },
      admin: {
        username: '',
        role: '',
        buildingName: '',
      },
      tableData: [],
      rules: {
        username: [{
          required: true,
          message: '用户名不能为空',
          trigger: 'blur'
        }],
        cellphone: [{
          required: true,
          message: '手机号码不能为空',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        }],
        role: [{
          required: true,
          message: '管理员角色不能为空',
          trigger: 'blur'
        }],
        buildingName: [{
          required: true,
          message: '宿舍楼不能为空',
          trigger: 'blur'
        }],
      }
    }
  },

  methods: {
    /*
      删除管理员操作
     */
    delAdmin(id) {

      // 封装请求参数
      let postData = new URLSearchParams();
      postData.append("id", id);

      // 通过axios发送请求
      axios.post("/admin/delete", postData)
        .then(function(res) {
          if (res.data.status == 10000) {
            // 弹出提示窗口
            ElMessage({
              showClose: true,
              message: '删除成功！',
              type: 'success',
            })
            location.reload();

          }
        })
    },

    /*
      编辑管理员信息Dialog
     */
    editAdminDialog(id) {

      // 打开弹窗
      this.dialogVisible = true;

      // 封装请求参数
      let postData = new URLSearchParams();
      postData.append("id", id);

      let _this = this.$data;
      // 通过aixos发送请求
      axios.post("/admin/selectById", postData)
          .then(function (res) {
            _this.editAdminInfo = res.data.data;
          })
    },

    /*
      修改管理员信息操作
     */
    editAdmin() {

      // 判断信息是否为空
      if (!this.editAdminInfo.username || !this.editAdminInfo.cellphone ||
          !this.editAdminInfo.password) {
        // 弹出提示窗口
        ElMessage({
          showClose: true,
          message: '管理员信息不能为空！',
          type: 'error',
        })
        return;
      }

      // 判断 role==2时，宿舍楼信息不能为空
      if (this.editAdminInfo.role == 2 && !this.editAdminInfo.buildingName) {
        // 弹出提示窗口
        ElMessage({
          showClose: true,
          message: '宿舍楼不能为空！',
          type: 'error',
        })
        return;
      }

      // 封装请求参数
      let postData = new URLSearchParams();
      postData.append("id", this.editAdminInfo.id);
      postData.append("username", this.editAdminInfo.username);
      postData.append("cellphone", this.editAdminInfo.cellphone);
      postData.append("role", this.editAdminInfo.role);
      postData.append("password", this.editAdminInfo.password);
      postData.append("buildingName", this.editAdminInfo.buildingName);

      // 通过axios发送请求
      axios.post("/admin/update", postData)
          .then(function (res) {
            switch (res.data.status) {
              case 10000:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '修改成功！',
                  type: 'success',
                })
                location.reload();
                break;
              case 10008:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '权限不够！',
                  type: 'error',
                })
                break;
              case 10003:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '用户名已存在！',
                  type: 'error',
                })
                break;
              case 10023:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '宿舍楼不存在！',
                  type: 'error',
                })
                break;
              case 10052:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '该宿舍楼已存在管理员！',
                  type: 'error',
                })
                break;
            }
          })
    },
    /*
        退出登录
     */
    logout() {

      // 删除后端session
      axios.get("/admin/logout")
          .then(function(res) {
            console.log(res)
          })

      // 清除sessionStorage
      sessionStorage.clear();

      // 弹出提示窗口
      ElMessage({
        showClose: true,
        message: '账号已退出！',
        type: 'success',
      })

      // 跳转到登录页面
      this.$router.push("/admin/login");
    },

    /*
        更改当前页
     */
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    }
  },

  mounted() {
    // 判断用户是否已经登录
    if (!sessionStorage.getItem('username')) {
      // 弹出提示窗口
      ElMessage({
        showClose: true,
        message: '请登录！',
        type: 'error',
      })
      // 路由跳转
      this.$router.push('/admin/login');
      return;
    }

    // 从sessionStorage获取用户名，赋值给data
    this.admin.username = sessionStorage.getItem("username");
    this.admin.role = sessionStorage.getItem("role");
    this.admin.buildingName = sessionStorage.getItem("buildingName")

    let that = this.$router;
    let _this = this.$data;

    // 通过axios查询所有无权限管理员信息
    axios.post('/admin/selectNoPermissions')
        .then(function (res) {
          if (res.data.status == 10014) {
            // 弹出提示窗口
            ElMessage({
              showClose: true,
              message: '未登录，请重新登录！',
              type: 'error',
            })
            // 路由跳转
            that.push('/admin/login');
            return;
          }

          _this.tableData = res.data.data;
          _this.pagination.total = res.data.data.length;

          // 通过axios查询所有宿舍楼信息
          axios.post("/admin/building/select")
              .then(function (res) {
                _this.buildingList = res.data.data
              })
        })


  },

  components: {
    Stamp,
    User,
    Grid,
    ArrowDown
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  margin: 0px;
  padding: 0px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  width: 100%;
  height: 80px;
  display: block;
  line-height: 80px;
  padding-left: 50px;
}

.el-header .title {
  font-size: 20px;
  float: left;
  color: #303133;
}

.addStuBtn .el-button {
  float: left;
  margin: 10px 100px 10px 10px;
}

.footer .el-pagination {
  float: right;
  margin: 20px 30px 10px 10px;
}
</style>